<template>
	<view>
		<view class="search_content">
			<u--input
				:placeholder="searchtype==1?'输入漫画名称':'输入文章标题'"
				suffixIcon="search"
				suffixIconStyle="color: #909399;font-size:20px"
				shape="circle"
				@change="change_search"
				v-model="search_data"
				fontSize="13px"
				style="background-color: #f5f7fa;height: 20px;"
			></u--input>
			<view class="search_clear" @click="back_page">
				取消
			</view>
		</view>
		<view class="search_manhua" v-if="searchtype==1">
			<ManhuaItem v-for="manhua in showmanhualist" :key="manhua.id" :manhua="manhua"></ManhuaItem>
		</view>
		<!-- <view class="firesearch">
			<view style="font-size: 15px;">
				热门搜索
			</view>
			<view class="show_search">
				<view class="">
					
				</view>
			</view>
		</view> -->
		<view class="search_essay" v-if="searchtype==2&&showessayList[0]">
			<EssayItem v-for="essay in showessayList" :key="essay.essayId" :essay="essay"></EssayItem>
		</view>
	</view>
</template>

<script>
	import api from '../../api/config.js'
	import ManhuaItem from '../../components/manhuaItem.vue'
	import EssayItem from '../../components/essayItem.vue'
	
	export default {
		data() {
			return {
				manhuaList: [],
				showmanhualist: [],
				essayList: [],
				showessayList: [],
				search_data: '',
				searchtype: 1
			}
		},
		components: {
			ManhuaItem,
			EssayItem
		},
		onLoad(option) {
			this.searchtype = option.searchtype
		},
		methods: {
			change_search() {
				if(this.searchtype==1){
					this.showmanhualist = []
					this.manhuaList.forEach(e => {
						if(this.search_data!=''){
							if(e.cartoonName.indexOf(this.search_data) != -1){
								this.showmanhualist.push(e)
							}
						}
					})
				}
				if(this.searchtype==2){
					this.showessayList = []
					this.essayList.forEach(e => {
						if(this.search_data!=''){
							if(e.essayTitle.indexOf(this.search_data) != -1){
								this.showessayList.push(e)
							}
						}
					})
				}
			},
			back_page() {
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		},
		mounted() {
			if(this.searchtype==1){
				uni.request({
					url:api + '/mobile_get_cartoon/',
					method:'GET',
					success:res=>{
						this.manhuaList = res.data.cartoon_list
					}
				})
			}
			if(this.searchtype==2){
				uni.request({
					url: api + "/get_all_essay/",
					method:'GET',
					success:res=>{
						this.essayList = res.data.data
					}
				})
			}
		}
	}
</script>

<style>
.search_content{
	padding: 60px 15px 0 15px;
	display: flex;
	justify-content: space-between;
}
.search_clear{
	font-size: 14px;
	color: #909399;
	padding: 7px 0 0 15px;
}
.search_manhua{
	text-align: center;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 10px 5px 10px 5px;
}
.search_essay{
	padding: 5px 0 10px 0;
	background-color: rgb(245, 245, 245);
	margin-top: 10px;
}
/* .firesearch{
	padding: 10px 15px 10px 15px;
}
.show_search{
	padding: 10px 5px 0 0;
} */
</style>
